<!DOCTYPE html>
<html>
      <head>
           <meta charset="utf-8">
            <title>Web</title>
			<link rel="stylesheet" href="CSS/layout.css">
			<link rel="stylesheet" href="CSS/main.css">
			<link rel="stylesheet" type="text/css" href="CSS/idangerous.swiper.css">
		 

                <style>
					
					img{width:100%;}
					#b1{width:100%;margin-top: -40px;}
					#f1{font-size:1rem; 
					margin-left: 30%;display:inline;padding-top: -100px;color:white;
					}
					#f2{font-size:1rem; 
					margin-left: 8%;display:inline;color: white;
					}
					
					
					@media screen and (max-width:1200px){
						#f1{font-size:12px; 
					margin-left: 30%;display:inline;padding-top: -100px;color: white;
					}
					#f2{font-size:12px; 
					margin-left: 8%;display:inline;color: white;
					}
					}
					
						@media screen and (max-width:1000px){
						#f1{font-size:10px; 
					margin-left: 30%;display:inline;padding-top: -100px;
					}
					#f2{font-size:10px; 
					margin-left: 8%;display:inline;
					}
					}
					
					#b2{width:80%;height:70%;padding-top: 3%;margin: 0 auto;}
					#b7{width:80%;height:8%;margin: 0 auto;margin-top: -1%;}
					#b3{width:80%;height:20%;padding-top: 2%;font-size: 1rem;color: #5B5555;margin: 0 auto;}
			
					
					div{
                  width:80%;
                  margin:0 auto;
                  overflow:hidden;
						
                }
                span{
                  float:left;
                  width:7.14%;
                  margin-top:1%;
                }
                img{width:100%;}
@media screen and (max-width:760px){
	
	span{
                  float:left;
                  width:7%;
                  margin-top:1%;
                }
					}
	
					
                 
					
					#b4{width:80%;
					margin: 0 auto;
					overflow: hidden;
					}
					
				
					img{width:100%;}
					
					
					 @media screen and (max-width:760px){
                 
						 
						 
					#b5{
						float:left;
						width:45%;
						margin-top:1%;margin-right: 5%;
						height:20%;
					}
						 
					#b6{
						float:left;
						width:45%;
						margin-top:1%;
						margin-right: 5%;
					}
					}
					
					
					
					
					
					
					
					
                </style>
         </head>
          <body>

	 <img src="img/2.png" alt="title">
			  
			  <div id="b1">
          	<div id="f1">HOME</div>
			<div id="f2">WORK</div>
			  <div id="f2">CONTACT</div>
			  <div id="f2">JOIN&nbsp;US</div></div>
			  
			  <div id="b2"><img src= "img/3.png" alt="00"></div>
			  <div id="b7"><img src= "img/21.png" alt="00"></div>
			  <div id="b3">INFINI（映纷创意）是一家以动画和设计为驱动的独立创意机构。我们运用多样化的创意形式，为品牌提供丰富多元的跨媒体整合创意营销。 </div>
			  <div>
				
				  <span><img src="img/01.png" alt="01" ></span>
				   <span><img src="img/02.png" alt="01" ></span>
					  <span><img src="img/03.png" alt="03" ></span>
					  <span><img src="img/4.png" alt="4" ></span>
					  <span><img src="img/5.png" alt="5" ></span>
					  <span><img src="img/6.png" alt="6" ></span>
					   <span><img src="img/7.png" alt="6" ></span>
					   <span><img src="img/8.png" alt="6" ></span>
					  <span> <img src="img/9.png" alt="6" ></span>
					  <span> <img src="img/10.png" alt="6" ></span>
					  <span> <img src="img/11.png" alt="6" > </span>
					  <span><img src="img/12.png" alt="6" ></span>
					   <span><img src="img/13.png" alt="6" ></span>
					   <span><img src="img/14.png" alt="6" ></span>
					  
				  </div>
				  
			      <div id="b4">
				  <div id="b5"><img src="img/16.png" alt="15"></div>
				  <div id="b6"><img src="img/17.png" alt="15"></div>
				  <div id="b5"><img src="img/18.png" alt="15"></div>
				  <div id="b5"><img src="img/19.png" alt="15"></div>
				  <div id="b6"><img src="img/20.png" alt="15"></div>
			  
			  
			  
			  
			  </div>
				  
				 
			
			  
			 
          </body>
</html>

